<template>
  <div>
    <el-breadcrumb class="breadcrumb-row" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>广告管理</el-breadcrumb-item>
      <el-breadcrumb-item>维护广告</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <div style="position: relative;margin-left:50%;transform:translateX(-50%)">
        <el-form ref="form" :model="form" label-width="80px" :rules="rules" size="small">
          <el-form-item label="名称：" prop="title">
            <el-input v-model="form.title" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item label="位置：" prop="position_id">
            <el-select v-model="form.position_id" placeholder="请选择广告位置" style="display:block;">
              <el-option
                v-for="item in optionsList"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="图片：" prop="image">
            <el-upload class="avatar-uploader" action="" :show-file-list="false"
                       :file-list="fileList"
                       :http-request="upload" :on-success="uploadSuccess"
                       :limit="1" multiple="">
              <img v-if="form.image" :src="form.image" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="URL：" prop="url">
            <el-input v-model="form.url" placeholder="请输入url"></el-input>
          </el-form-item>
          <el-form-item label="描述：">
            <el-input type="textarea" v-model="form.desc" placeholder="请输入描述" rows="3" maxlength="200"
                      show-word-limit></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm">保存</el-button>
            <el-button type="default" @click="pageBack">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import {ad, adPosition, common, status} from "../../request";

export default {
  name: "Save",
  data() {
    return {
      form: {}, optionsList: [], fileList: [], rules: {
        title: [{required: true, message: '*必填'}],
        position_id: [{required: true, message: '*必填'}],
      }
    };
  },
  created() {
    //获取位置
    this.getAdPositionList();

    if (this.$route.params.id) {
      this.getInfo(this.$route.params.id);
    }
  },
  methods: {
    pageBack() {
      this.$router.back();
    },
    async getInfo(id) {
      const res = await ad.read({id});
      if (res.code == status.SUCCESS) {
        delete res.data.create_time, delete res.data.update_time, delete res.data.status;
        this.form = res.data;
      }
    },
    async getAdPositionList() {
      const res = await adPosition.list();
      if (res.code == status.SUCCESS) this.optionsList = res.data.data;

      console.log(this.optionsList);
    },
    uploadSuccess(response, file, fileList) {
      this.fileList = [];
    },
    async upload(file) {
      if (!file) return this.$message.error('请选择上传文件');
      if (!/^image\/(jpg|png|jpeg)$/i.test(file.file.type)) return this.$message.error('不支持此文件类型');
      if (file.file.size > 1024 * 1024 * 2) return this.$message.error('文件超出2M');

      let params = new FormData();
      params.append('file', file.file);
      params.append('_t1', new Date());
      const res = await common.upload(params);
      if (res.code == status.SUCCESS) {
        this.$message.success(res.msg);

        this.form.image = res.data.file.url;
        //this.fileList = [{'name': file.filename, url: res.data.file.url}];
      }
    },
    /**
     * 提交表单
     */
    submitForm() {
      this.$refs.form.validate(async valid => {
        console.log(valid);
        if (!valid) return this.$message.error('请输入必填信息');

        const res = await ad.add(this.form);
        if (res.code == status.SUCCESS) {
          this.$message.success(res.msg);
          setTimeout(() => {
            this.$router.back();
          }, 1000);
        }
      });
    },
  },
}
</script>

<style scoped>
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar-uploader-icon:hover {
  border-color: #409EFF;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
